<template>
  <div class="radio-container">
    <div class="radio-title">请选择标签：</div>
    <div class="radio-content">
      <el-radio-group v-model="radioValue" size="small" @change="handleChange">
        <el-radio
          class="tag"
          v-for="(item, index) in radioList"
          :key="index"
          :label="item.id"
          border>
          {{item.name}}
        </el-radio>
      </el-radio-group>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tagList: {
      type: Array,
      default: function () { return []; }
    }
  },
  watch: {
    tagList (newVal) {
      if (newVal && newVal.length) {
        this.radioList = newVal.map(item => {
          return {
            id: item.id,
            name: item.classifyName
          };
        })
      }
    }
  },
  data () {
    return {
      radioValue: '',
      radioList: []
    }
  },
  methods: {
    handleChange () {
      this.$emit('change', this.radioValue);
    }
  }
}
</script>
<style lang="less" scoped>
.radio-container {
  width: 100%;
  border: 1px solid #DCDFE6;
  padding: 10px;
  box-sizing: border-box;
  .radio-title {
    line-height: 40px;
  }
  .radio-content {
    // text-align: center;
  }
  .tag {
    margin-bottom: 10px;
    margin-left: 0!important;
  }
}
</style>
